<style lang="less">

	.storeinfo{
		.addres{
			background: #fff;
			padding:10px;
			position:relative;
			padding-right:100px;
			h3{font-size: 14px;}
			p{font-size: 12px;}
			.right{
				position:absolute;
				right:10px; top:10px;
				width: 90px;
				text-align: center;
			}
		}
		.content{
			background: #fff;
			padding:10px;
			margin-top: 10px;
			h3{font-size: 14px;padding-bottom: 10px;}
			p{font-size: 12px; color:#909399}
		}
    .phoneimg{
      width:25px;
      height:25px;
      display: inline-block;
      padding:3px;
    }
    .ddimg{
      width:30px;
      height:30px;
      display: inline-block;
    }
	}
  .julis{
    font-size:14px;
    color:#999;
  }
  /*#allmap{*/
    /*width:80%;*/
    /*height:300px;*/
    /*border:1px solid;*/
  /*}*/
</style>

<template>
	<div class="storeinfo">
		<img :src="form.src" alt="" style="width:100%;">
		<div class="addres">
			<h3>{{form.name}}</h3>
			<p>{{form.regions_name}}</p>
			<p>{{form.address}}</p>
      <p class="julis">
        <i class="iconfont icon-zuobiao1"></i>{{juli.jl}}km
      </p>
			<div class="right">
				<!--<x-icon type="ios-ionic-outline" size="30"></x-icon>-->
        <img src="../../../assets/phone.png" class="phoneimg" @click="phoneCall" alt="">
        <img src="../../../assets/dh.png" class="ddimg" alt="" @click="getlngLat">
			</div>
		</div>
		<div class="content">
			<h3>门店介绍</h3>
			<p>{{form.short_name}}</p>
		</div>

    <div id="allmap"></div>
    <back></back>
	</div>
</template>

<script>
  import axios from 'axios';
  import back from '@/components/back/backPrev';
	export default {
		directives: {

		},
		components:{
      back
		},
		data(){
			return {
        phone:'',
        address:'',
        forms:{},
        storesDatils:{},
        hrefs:'',
        pointA:'',
        juli:{
          jl:0,
          lat:0,
          lng:0
        }
			}
		},
		methods : {
		  // 打电话
      phoneCall(){
        // console.log(this.phone)
        if(!this.phone){
          this.$toast('该店铺未填写电话号码！')
        }
        window.location.href = "tel:"+this.phone;
      },
      getRad(d){
        var PI = Math.PI;
        return d*PI/180.0;
      },
      // 计算距离
      jisuan(lat1,lng1,lat2,lng2){
        var f = this.getRad((lat1 + lat2)/2);
        var g = this.getRad((lat1 - lat2)/2);
        var l = this.getRad((lng1 - lng2)/2);
        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);
        var s,c,w,r,d,h1,h2;
        var a = 6378137.0;//The Radius of eath in meter.
        var fl = 1/298.257;
        sg = sg*sg;
        sl = sl*sl;
        sf = sf*sf;
        s = sg*(1-sl) + (1-sf)*sl;
        c = (1-sg)*(1-sl) + sf*sl;
        w = Math.atan(Math.sqrt(s/c));
        r = Math.sqrt(s*c)/w;
        d = 2*w*a;
        h1 = (3*r -1)/2/c;
        h2 = (3*r +1)/2/s;
        s = d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
        s = s/1000;
        s = s.toFixed(2);//指定小数点后的位数。
        return s;
      },
      // 根据地址获取经纬度
      getlngLat(){
        // console.log(this.forms)
        // return
        var that = this;
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(this.juli.lng,this.juli.lat);
        map.centerAndZoom(point, 14);
        map.enableScrollWheelZoom();

        var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
          anchor: new BMap.Size(10,10)
        });
        // return;
        var marker=new BMap.Marker(point,{icon: myIcon});
        map.addOverlay(marker);
        // return;
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){

          if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);//地图中心点移到当前位置
            var latCurrent = r.point.lat;
            var lngCurrent = r.point.lng;
            var lnglat = that.juli.lat +','+that.juli.lng
            //alert('我的位置：'+ latCurrent + ',' + lngCurrent);
            that.hrefs="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination="+lnglat+"&mode=driving&region=''&output=html";
            location.href= that.hrefs
            // location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html";
          }
          else {
            alert('failed'+this.getStatus());
          }
        },{enableHighAccuracy: true})

        map.addOverlay(marker);
        var licontent="<b>"+this.forms.title+"</b><br>";
        licontent+="<span><strong>地址：</strong>"+this.forms.regions_name+this.forms.address+"</span><br>";
        licontent+="<span><strong>电话：</strong>"+this.forms.phone+"</span><br>";
        var opts = {
          width : 200,
          height: 80,
        };

        var  infoWindow = new BMap.InfoWindow(licontent, opts);

        marker.openInfoWindow(infoWindow);
        marker.addEventListener('click',function(){
          marker.openInfoWindow(infoWindow);
        });


      },
      // 获取我的经纬度
      getMyPoint () {
        var self = this
        var geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition(function (res) {
          self.pointA = new BMap.Point(res.point.lng, res.point.lat)  // 通过浏览器获得我的经纬度
          self.getData()
        })
      },
      //获取店铺经纬度
      getData(){
        var s = encodeURIComponent(this.forms.regions_name+this.forms.address);
        var that = this;
        $.ajax({
          type: "POST",
          url: 'http://api.map.baidu.com/geocoder/v2/?ak=gMi17m4MgNplH5L6q7zK2qAi19hmffm6&output=json&address='+s,
          dataType: "JSONP",
          async:false,
          success: function (data) {
            if (parseInt(data.status) == 0) {
              var juliss = that.jisuan(that.pointA.lat,that.pointA.lng,data.result.location.lat,data.result.location.lng)
              that.juli.jl = juliss;
              that.juli.lat = data.result.location.lat;
              that.juli.lng = data.result.location.lng;
            }
          }
        });
      },
		},
		computed : {
			form (){
        if(!sessionStorage.getItem('forms')){
          var s = JSON.stringify(this.$store.state.user.stores.form);
          // console.log(s)
          sessionStorage.setItem('forms',s)
          this.forms = this.$store.state.user.stores.form
          this.phone = this.$store.state.user.stores.form.phone
          this.address = this.$store.state.user.stores.form.regions_name
        }else{
          // console.log(sessionStorage.getItem('forms'))
          var ss = JSON.parse(sessionStorage.getItem('forms'))
          this.forms = ss
          this.phone = ss.phone
          this.address = ss.regions_name
          this.$store.state.user.stores.form = ss
        }
        // console.log(this.$store.state.user.stores.form)
        // this.getlngLat();
        return this.$store.state.user.stores.form;
			}
		},
		created(){

		},
    mounted(){
      this.getMyPoint()
    },
		watch : {

		}
	}
</script>
